<template>
	<view class="">
		<view class="margin-top-sm">
			<!-- 搜索框 -->
			<view style="margin-top: 20rpx;display: flex;">
				<view style="width: 150rpx;margin: 0rpx 10px;">
					<button class="login-btn cu-btn block bg-white" @click="showMore">更多</button>
				</view>
				<view style="flex: 1;margin: 0rpx 10px;">

				</view>
				<view style="width: 150rpx;margin: 0rpx 10px;">
					<button class="login-btn cu-btn block bg-blue" @click="init">查询</button>
				</view>
			</view>
		</view>

		<view class="font-12 juzhong navbar " style="color: #999;padding: 10rpx;" v-if="total>0">
			第{{queryFrom.pageNo}}页，共计{{total}}条
		</view>

		<view class="bg-white  padding-sm   margin-bottom-sm" v-for="item in list">
			<view style="z-index:3;position: relative;">
				<view style="display: flex;justify-content: space-between;">
					<view>
						<view style="font-weight: bold;">
							{{ $getDictNameByValue('ContractConsumptionDetailsType', item.type) }}
						</view>
						<view class="font-12 margin-top-xs ">课时:{{item.number}}</view>

					</view>

					<view style="text-align: right;">
						<view class="margin-right-xs font-12" style="z-index: 3;">
							创建人:{{formatterUserName(item.createBy)}}
						</view>
						<view class="font-12 margin-top-xs" style="">
							{{item.createTime}}
						</view>

					</view>


				</view>


				<view style="height: 1px;background-color: #ededed;margin: 10rpx 0px;"></view>
				<view style="display: flex;z-index: 3;" class="margin-top-sm" v-if="item.list">
					<view style="flex: 1;" v-for="item2 in item.list.split(',')">
						<view class="juzhong" style="font-weight: bold;">{{item2.split(':')[1]}}</view>
						<view class="juzhong font-12 margin-top-xs">{{item2.split(':')[0]}}</view>
					</view>

				</view>
			</view>
		</view>

		<!-- 查询更多 -->
		<customerQuery @refresh="init" ref="customerQuery">
			<template v-slot:default="slotProps">
				<uni-forms-item label="合同状态">
					<uni-data-checkbox style="width: 100%;" mode="button" v-model="queryFrom.startus_EQ"
						:localdata="slotProps.dict.VipContractStartus"
						:map="{text:'dictName',value:'dictValue'}"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="合同编号">
					<uni-easyinput v-model="queryFrom.offlineContractId_LIKE" placeholder="合同编号"></uni-easyinput>
				</uni-forms-item>
			</template>

		</customerQuery>

	</view>

</template>

<script>
	import {
		getList
	} from "@/api/vip/contractconsumptiondetails/VipContractConsumptionDetailsManagementApi";
	import {
		isNull
	} from '@/utils/validate'
	import customerQuery from "@/pages/common/customerQuery/customerQuery.vue"
	import {
		formatterUserName,
		getcommon
	} from '@/utils/common'
	export default {
		components: {
			customerQuery
		},
		data() {
			return {
				queryFrom: {
					pageNo: 1,
					pageSize: 10,
					startus_EQ: null,
					createTime_ORDER: "DESC",
					customerId_EQ: null,
				},
				total: 0,
				list: []
			}
		},
		mounted() {

		},
		onLoad(op) {
			if (op.id != null) {
				this.queryFrom.vipContractId_EQ = op.id
			}
			this.init()
		},
		// 触底事件 - 上拉加载
		onReachBottom() {
			// 加判断： 页码数 * 每一页获取数据的条数 >= 总条数，如果符合条件说明数据已经全部加载完毕
			if (this.queryFrom.pageNo * this.queryFrom.pageSize >= this.total) {

				return
			} else {

				this.queryFrom.pageNo++ // 每触发一次触底事件，页码加1
				this.listAdd() // 请求接口，获取数据  
			}
		},
		methods: {
			formatterUserName(cellValue) {
				return formatterUserName(cellValue)
			},
			showMore() {
				this.$refs["customerQuery"].open(this.queryFrom);
			},
			init() {
				this.list = []
				this.total = 0
				this.queryFrom.pageNo = 1
				//查询合同信息
				this.fetchData()
			},
			listAdd() {
				//查询合同信息
				this.fetchData()
			},
			formatting(str) {
				str = str.replace("s", "剩余") //结果"yyyy/MM-dd-hh-mm-ss"
				str = str.replace("b", "补课") //结果"yyyy/MM-dd-hh-mm-ss"
				str = str.replace("d", "待上") //结果"yyyy/MM-dd-hh-mm-ss"
				str = str.replace("y", "已上") //结果"yyyy/MM-dd-hh-mm-ss"
				console.log(str);
				return str
			},
			async fetchData() {
				const {
					data
				} = await getList(this.queryFrom);
				if (!isNull(data)) {
					for (let s of data.rows) {
						s.list = []
						s.list = (this.formatting(s.text))
						this.list.push(s)
					}
					this.total = data.total;
				}

			},

		}
	}
</script>

<style>
	.navbar {

		width: 100%;


		background-color: #f1f1f1;
		z-index: 4;
		text-align: center;

		/* 兼容 */

		position: -webkit-sticky;

		position: -ms-sticky;

		position: -o-sticky;

		/* 粘性定位*/

		position: sticky;

		left: 0;

		top: 0
	}
</style>